import React from 'react';
import { Row, Col, Pagination } from 'antd';
import { WeaNewScroll, WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

const LeftList = function (props) {
  const { datas, deleteVote, viewVote, checkedRowKeys, paginationProps } = props;
  const prefixCls = 'group-voting-list';

  const getItem = record => (
      <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@qukhqm`}
        key={record.id}
        className={`${prefixCls}-item`}
        onClick={() => viewVote(record.id)}
      >
        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ufevdu`} span={23} className={`${prefixCls}-item-info`}>
          <div className={`${prefixCls}-item-info-theme`}>
            <span className={'wea-f14 name'} dangerouslySetInnerHTML={{ __html: record.votetheme }} />
            {record.votestatusspan === '0' ? (
              <span className="group-voting-state-ing">{getLabel('1960', '进行中')}</span>
            ) : (
              <span className="group-voting-state-end">{getLabel('22348', '已结束')}</span>
            )}
          </div>
          <div className={`${prefixCls}-item-info-creater`}>
            <span>{record.createridspan}</span>
            <span>{`${record.createdatespan} ${record.createtimespan}`}</span>
          </div>
        </Col>
        {
          record.canDelspan === '1' && (
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@83x56l`} span={1} className={`${prefixCls}-item-ops`}>
              <i
                className="icon-coms-Delete"
                onClick={e => deleteVote(e, record)}
              />
            </Col>
          )
        }
      </Row>
    );

  return (
    <div className={`${prefixCls}-leftList`}>
      <div className={`${prefixCls}-leftList-scroll`}>
        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@alsdna`} height="100%">
          {
            datas.map(data => (
                <div
                  className={`${prefixCls}-leftList-line`}
                  key={`${data.id}-line`}
                  style={checkedRowKeys == data.id ? { backgroundColor: '#e9f7ff' } : null}
                >
                  <div className={`${prefixCls}-leftList-line-item`}>
                    { getItem(data) }
                  </div>
                </div>
              ))
          }
        </WeaNewScroll>
      </div>
      <div className={`${prefixCls}-leftList-pagination`}>
        <Pagination ecId={`${this && this.props && this.props.ecId || ''}_Pagination@l7y0e0`} size="small" {...paginationProps} />
      </div>
    </div>
  );
};

export default LeftList;
